{% load humanize %}
{% load firecares_tags %}
{% load widget_tweaks %}

<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="{{ object.description }} Remove intersecting departments for {{ object.name }}.">
    <meta name="author" content="Prominent Edge LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Remove intersecting departments for: {{ object.name }}</title>
    {% include 'firestation/_favicon.html' %}
    {% include "firestation/_firecares_style.html" %}


    <script type="text/javascript">
    var config = {
      geom: {{ object.geom.json|safe|default:"null" }},
      centroid: [{{ object.headquarters_address.geom.centroid.y }}, {{ object.headquarters_address.geom.centroid.x }}],
      headquarters: {{ object.headquarters_address.geom.json|safe|default:"null" }},
      headquartersName: "{{ object.name }} Headquarters",
      id: {{object.id}}
    }
    </script>
    {% include 'google_analytics.html' %}
</head>

<body class="ct-headroom--fixedTopBar cssAnimate" ng-controller="jurisdictionController" ng-app="fireStation">

{% include 'firestation/_mobile_navbar.html' %}
{% include 'firestation/_mobile_search.html' %}

<div id="ct-js-wrapper" class="ct-pageWrapper">

<div class="ct-navbarMobile">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand logo" href="{% url 'firestation_home' %}"><h1>FireCARES</h1></a>
    <button type="button" class="searchForm-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-search"></i></span>
    </button>
</div>

{% include "firestation/_navbar.html" %}

<div class="ct-site--map">
    <div class="container">
        <a href="{% url 'firestation_home' %}">Home</a>
        <a href="{% url 'firedepartment_list' %}">Departments</a>
        <a href="{% url 'firedepartment_detail_slug' object.id object.slug %}">{{ object.name }}</a>
        <a href="{% url 'firedepartment_update_government_units' object.id %}">Link Government Units</a>
    </div>
</div>
<header class="ct-mediaSection">
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="ct-u-displayTableVertical">
                <div class="ct-textBox ct-u-text--white ct-u-displayTableCell text-left">
                    <h2>{{ object.name }}</h2>
                    <h4>{{ object.headquarters_address.get_row_display }}</h4>
                    <span class="ct-productID ct-fw-300">
                        FDID: <span>{{ object.fdid }}</span>
                    </span>
                </div>
                <div class="ct-u-displayTableCell text-right">
                    {% include 'firestation/_department_header.html' %}
                </div>
            </div>
        </div>
    </div>
</header>
<section class="ct-u-paddingBottom60">
    <div class="container">
        <div class="ct-section--products">
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <div class="ct-heading ct-u-marginBottom20 ct-u-marginTop30">
                        <h3>{{ object.name }}</h3>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="ct-u-displayTableVertical ct-productDetails">
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Department Type</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.department_type }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">NFPA Region</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.region }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">FDID</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.fdid }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">State</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.state }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Phone</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.headquarters_phone|phonenumber|default:"Unknown" }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Fax</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.headquarters_fax|phonenumber|default:"Unknown" }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Protected population</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        {% if object.population %}
                                        <span>{{ object.population|intcomma }}</span>
                                        {% else %}
                                        <span>Unknown</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Community size</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.geom_area|floatformat:"2"|intcomma}} <span>mi&sup2;</span></span>
                                    </div>
                                </div>
                                {% if object.twitter_handle %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Twitter</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span><a href="https://twitter.com/{{ object.twitter_handle }}" target="_blank">@{{object.twitter_handle}} <i class="fa fa-external-link ct-fw-600"></i></a></span>
                                    </div>
                                </div>
                                {% endif %}
                                {% if object.website %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600"><a href="{{ object.website }}">Official Website <i class="fa fa-external-link ct-fw-600"></i></a></span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div id="map"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-lg-12 ct-u-marginTop10">
                            <div class="ct-u-displayTableVertical">
                                <div class="ct-u-displayTableCell text-left">
                                    <i class="fa fa-clock-o pull-left"></i><h6>Last Updated: {{ object.modified }}</h6>
                                </div>
                                <div class="ct-u-displayTableCell text-right">
                                    <a href="" ng-click="toggleFullScreenMap()"><i class="fa fa-arrows-alt"></i> View Fullscreen Map</a>
                                </div>
                            </div>
                        </div>
         <!--                <div class="col-md-4 col-lg-3 text-right">
                            <a href=""><i class="fa fa-times"></i>report abuse</a>
                        </div> -->
                    </div>
                    <hr/>
                    <div class="col-sm-6 col-md-12 ct-u-marginBottom30">
                        <h3>Intersecting Departments</h3>
                    </div>
                    <form role="form" method="post" class="usgs" action="{% url 'remove_intersecting_departments'  object.id %}">
                        {% csrf_token %}
                        <div class="col-sm-12 col-md-12 ct-u-marginBottom10">
                            <div class="metric-card">
                                <label class="featured-department-map-label control-label sale">
                                    Departments
                                </label>
                                <div class="main-content ct-u-paddingTop20">
                                    <div class="main-text">
                                        <ul class="col-md-12">
                                            {% for c in intersecting_departments %}
                                            <li>
                                                <label class="col-md-3 ct-u-marginTop10">
                                                    <input class="hang-left" type="checkbox" name="departments" value="{{ c.pk }}"/>
                                                    <h4>{{ c }}</h4>
                                                    <div class="ct-u-displayTableVertical ct-productDetails ct-u-marginTop20">
                                                        <div class="ct-u-displayTableRow">
                                                            <div class="ct-u-displayTableCell">
                                                                <span class="ct-fw-600">FDID</span>
                                                            </div>
                                                            <div class="ct-u-displayTableCell text-right">
                                                                <span>{{ c.fdid|default:"(not available)" }}</span>
                                                            </div>
                                                        </div>
                                                        <div class="ct-u-displayTableRow">
                                                            <div class="ct-u-displayTableCell">
                                                                <span class="ct-fw-600">Population</span>
                                                            </div>
                                                            <div class="ct-u-displayTableCell text-right">
                                                                <span>{{ c.population|intcomma|default:"(not available)" }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                                <inline-map type='County' overlay-geom='{{ c.geom.json|safe|default:"null"}}' class="map col-md-9 ct-u-marginBottom20"></inline-map>
                                                {% if not forloop.last %}
                                                <hr/>
                                                {% endif %}
                                            </li>
                                            {% empty %}
                                            <li><em>No counties intersect with the department headquarters</em></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="submission">
                                <button class="btn btn-primary btn-xlarge pull-left ct-u-marginTop20" type="submit">Remove Intersecting Departments</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</section>
{% include 'firestation/_footer.html' %}
</div>

{% include "firestation/_firecares_scripts.html" %}

</body>
</html>
